import { ref } from 'vue';
import { CommentOwn } from '../common.js';
import { RectBoxProps } from './use-rect-box.js';

export const Comment = startPoint => Object.assign(
  CommentOwn(),
  { color: '#f00' },
  RectBoxProps(),
  startPoint
);

export function useComment(xs) {
  /** @type {import('vue').Ref<null | ObjDetn.Comment>} */
  const editingDataItem = ref(null);

  function select(dataItem) {
    editingDataItem.value = dataItem;
  }

  function clear() {
    xs.value.splice(0);
  }

  function del(dataItem) {
    if (!xs.value.includes(dataItem)) { return; }
    xs.value.splice( xs.value.indexOf(dataItem), 1 );
  }

  function toggleVisible() {
    // 只要有显示的就都隐藏，否则都显示
    const visible = R.compose( R.not, R.any(R.prop('visible')) )(xs.value);
    xs.value.forEach(x => x.visible = visible);
  }

  return {
    editingDataItem,
    select,
    clear,
    del,
    toggleVisible,
  };
}
